<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>width:100%</title>
        <style>
            .box-600-200{
                width: 600px;
                height: 200px;
            }
            .box-400-200{
                width: 400px;
                height: 200px;
            }
            .box-200-200{
                width: 200px;
                height: 200px;
            }
            .bgc-red{
                background-color: red;
            }
            .bgc-purple{
                background-color: purple;
            }
            .bgc-pink{
                background-color: pink;
            }
            .w100p{
                width: 100%;
            }
            .fl{
                float: left;
            }
            .clearfix{
                zoom:1;
            }
            .clearfix:after{
                display:table-cell;
                content:"";
                clear:both;
            }
        </style>
    </head>
    <body>
        <p>width:100%</p>
        <p>width:100% 这个东西在 ie 里用很方便，会向上逐层搜索 width 值，忽视浮动层的影响.</p>
        <p>Firefox 下搜索至浮动层结束，如此，只能给中间的所有浮动层加 width:100%才行，累啊。</p>
        <p>opera 这点倒学乖了，跟了 ie</p>
        <div class="box-600-200 clearfix">
            <div class="fl bgc-red">
                <div>好好学习，天天向上</div>
                <div class="w100p bgc-purple">width:100%;</div>
            </div>
            <div class="fl box-200-200 bgc-pink"></div>
        </div>
        p{解决办法}
        <div class="box-600-200">
            <div class="fl box-400-200 bgc-red">
                <div>好好学习，天天向上</div>
                <div class="w100p bgc-purple">width:100%;</div>
            </div>
            <div class="fl box-200-200 bgc-pink"></div>
        </div>
    </body>
</html>